<template>
	<view class="container">
		<view class="titlebox">
			<input type="text" name="" id="PPP" class="title" placeholder="点击输入文章标题" @input="descInput($event)"
				v-model="title">
			<view class="show_number">
				{{remnant}}/100
			</view>
		</view>
		<view class="Keywordsbox">
			<textarea name="" id="" cols="30" rows="10" class="Keywords" placeholder="点击输入关键词(关键词之间用空格分开)"
				@input="descInputtitle($event)" v-model="keyword"></textarea>
			<view class="show_number">
				{{remnant2}}/1000
			</view>
		
		</view>


		<view class="orderContent-box">

			<view class="orderContent-item" @click="tap">
				<text>{{textNum}}</text>
				<text></text>
				<view></view>
				<image src="../../static/right.png" alt=""></image>
			</view>


		</view>
		<view class="clear" @click="clear">
			清空内容
		</view>
		<view class="bottomnav">
			<view class="clear" @click="clear">
				
			</view>
			<button type="primary" plain="true" class="btn" @click="generate">生成</button>
		
		</view>

		<!-- pop -->
		<wyb-popup ref="popup" type="center" height="600" width="500" radius="6" >
			<view class="content">
				<view class="choose">
					请选择字数
				</view>
				<view class="write" @click="chooseNext4">
					400
				</view>
				<view class="ask" @click="chooseNext6">
					600
				</view>
				<view class="ask2" @click="chooseNext8">
					800
				</view>
				<view class="ask3" @click="chooseNext0">
					不限字数
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		data() {
			return {
				remnant2: "0",
				remnant: "0",
				name:'',
				loveParams:{
					uid:'',
					chat_id:'new',
					content:'',
					type: 'creation'
				},
				title: '',
				keyword: '',
				textNum:'请选择字数'
			}
		},
		components: {
			wybPopup
		},
		onLoad() {
			let uid = uni.getStorageSync('uid');
			this.loveParams.uid = uid
		},
		methods: {
			clear() {
				this.name='',
				this.textNum= '请选择字数'
			},
			descInput(e) {
				// console.log(e)
				this.remnant = e.detail.value.length
			},
			descInputtitle(e) {
				this.remnant2 = e.detail.value.length
			},
			tap () {
				this.$refs.popup.show()
			},
			chooseNext4(){
				uni.setStorageSync('name', this.name);
				this.$refs.popup.hide()
				this.textNum = 400
			},
			chooseNext6(){
				uni.setStorageSync('name', this.name);
				this.$refs.popup.hide()
				this.textNum = 600
			},
			chooseNext8(){
				uni.setStorageSync('name', this.name);
				this.$refs.popup.hide()
				this.textNum = 800
			},
			chooseNext0(){
				uni.setStorageSync('name', this.name);
				this.$refs.popup.hide()
				this.textNum =  '不限字数'
			},
			generate() {
				let content = '请以' + this.title + '为主题，写一篇' + this.textNum + '字包含以下关键词的作文,关键词是：' + this.keyword
				if (this.title == '' || this.textNum == '请选择字数' || this.keyword == '') {
					uni.showToast({
						icon: 'error',
						title: '请填写内容或字数'
					})
				} else {
					this.loveParams.content = content
					// console.log(this.loveParams);
					uni.setStorageSync('continueParams', this.loveParams);
					
					uni.navigateTo({
						url: '../CreationResult/CreationResult'
					})
				}
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.container {
		// width: 90%;
		height: 100vh;
		padding: 0 5%;
		background-color: #f4f5f7;
		padding-top: 60rpx;
	}

	.titlebox {
		background-color: #fff;
	}

	.title {
		width: 94%;
		min-height: 10rpx;
		background-color: #fff;
		// min-height: 6rem;
		padding: 3% 3%;
	}

	.show_number {
		width: 97%;
		text-align: right;
		color: #b4b4b5;
		margin-right: 200rpx;
	}

	.Keywordsbox {
		background-color: #fff;
		margin: 5% 0;

		.Keywords {
			width: 94%;
			background-color: #fff;
			min-height: 6rem;
			padding: 0 3%;
		}

		.show_number {
			width: 97%;
			text-align: right;
			color: #b4b4b5;
			margin-right: 200rpx;
		}
	}

	.orderContent-box {
		display: grid;
		width: 90vw;
		margin-top: 40rpx;
		grid-template-rows: repeat(1, 120rpx);
		justify-items: center;
		background-color: #fff;

		.orderContent-item {
			display: grid;
			// width: 100vw;
			grid-template-columns: auto 190rpx 260rpx 50rpx;
			line-height: 120rpx;
			justify-items: center;
			align-items: center;
			font-size: 15px;
			color: #b4b4b5;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.content {
		width: 60vw;
		height: 50vh;
		margin: 5% auto 0;
		.choose {
			text-align: center;
			font-size: 18px;
		}
		.write {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(68, 212, 183, 1) 0%, rgba(48, 184, 156, 1) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto 5%;
			margin-top: 5%;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
		
		.ask {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(84, 172, 212, 1.0) 0%, rgba(61, 137, 184, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
		.ask2 {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(80, 94, 212, 1.0) 0%, rgba(51, 68, 166, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 5% auto 5%;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
		.ask3 {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(118, 80, 212, 1.0) 0%, rgba(89, 60, 184, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
	}
	.clear {
		color: #b4b4b5;
		margin-top: 20rpx;
		padding-left: 10rpx;
	} 
	
	
	.bottomnav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 96%;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #fff;
		padding: 0 2%;
	
		.clear {
			display: inline-block;
			color: #9d9d9d;
			font-size: 16px
		}
	
		.btn {
			display: inline-block;
			float: right;
			margin: 20rpx;
			height: 70rpx;
			line-height: 65rpx;
	
		}
	}
	
	.titlebox {
		background-color: #fff;
	}
	
	.title {
		width: 94%;
		background-color: #fff;
		min-height: 4rem;
		padding: 0 3%;
	}
	
	.show_number {
		width: 97%;
		text-align: right;
		color: #b4b4b5;
		margin-right: 200rpx;
	}
	
	.Keywordsbox {
		background-color: #fff;
		margin: 5% 0;
		padding: 5% 0;
	
		.Keywords {
			width: 94%;
			background-color: #fff;
			min-height: 6rem;
			padding: 0 3%;
		}
	
		.show_number {
			width: 97%;
			text-align: right;
			color: #b4b4b5;
			margin-right: 200rpx;
		}
	}
</style>
